<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/fontawesome/css/all.min.css" rel="stylesheet">
    <link href="css/tooltip/css/tooltip1.css" rel="stylesheet">
    <link href="css/tooltip/css/tooltip2.css" rel="stylesheet">
    <link href="css/tooltip/css/tooltip.css" rel="stylesheet">
    <link href="css/container.css" rel="stylesheet">
    <link href="css/chat.css" rel="stylesheet">
    <title>Title</title>
    <style>

    </style>
    <link rel="stylesheet" href="css/tooltip/css/tooltip1.css">

</head>
<body>
<header id="header" style="background-color: rgb(255, 255, 255);
                color: rgb(31, 31, 31);
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                position: fixed">
    <div style="float:left; height: 100%;width: 175px;padding-left: 25px">
        <span id="header_logo" style="float:left;">
    <img src="images/logoMain.png" style="width: 100%;">
    </span>
    </div>
    <div style="float: right;padding-right: 20px" id="top_app">
        <div style="display: inline-block;
                    vertical-align: middle;
                    margin-left: 20px;
                    color: #454d5a;
                    position: relative;">
            <div style="display: block;" class="tooltip2" >
                <i class="fa fa-user-circle iconfont" aria-hidden="true"></i>
                <a class="admin_tag" href="admin.html">个人中心</a>
                <div class="tooltiptext">
                    <li class="popup_user_toolbar__item">
                        <div class="popup_user_data">
                            <a class="popup_user_data__cover_link">
                                <img src="images/profile.png" class="popup_user_data__cover" alt="">
                            </a>
                            <div class="popup_user_data__cont">
                                <div class="popup_user_data__name">
                                    <p style="float: left;font-weight: normal;margin-right: 50px" >easy
                                        <!--                                        <i class="fa fa-mars-stroke-v" style="display: block;color: #50D681;"></i>-->

                                        <!--
                                        <i class="fa fa-mercury"></i>
                                        -->
                                    </p>
                                    <span style="float:left; margin-left: 20px;font-size: 10px;font-weight: normal;  font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;">
                                            <strong style="height: 20px; display: block;font-weight: normal">4</strong>
                                            <span>好友</span>
                                        </span>
                                    <span style="float:left; margin-left: 20px;font-size: 10px;font-weight: normal;  font-family: poppin,Tahoma,Arial,\5FAE\8F6F\96C5\9ED1,sans-serif;">
                                            <strong style="height: 20px; display: block;font-weight: normal">0</strong>
                                            <span><i class="fa fa-thumbs-up" aria-hidden="true"></i>点赞</span>
                                        </span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="popup_user_toolbar__item"><a href="../userCenter.html">修改个人资料</a></li>
                    <li class="popup_user_toolbar__item" role="separator" class="divider"></li>
                    <li class="popup_user_toolbar__item"><a href="../login.html" @click="logout">退出登录</a></li>
                </div>
            </div>
        </div>
        <div style="display: inline-block;

                    vertical-align: middle;
                    color: #454d5a;
                    position: relative;">
            <div style="display: block;">
                <div style="position: relative;
                            padding-left: 10px;

                            width: inherit;
                            vertical-align: middle;
                            height: 61px;
                            display: inline-block;">
                </div>
                <div style="display: inline-block;
                            vertical-align: middle;">
                    <a style="color: #454d5a;">
                        <i class="fa fa-link" aria-hidden="true"></i>
                        <a class="admin_tag" href="admin.html">传输列表</a>
                        <i class="find-light-icon" style="display: block"></i>
                    </a>
                </div>
            </div>
        </div>
        <div style="display: inline-block;
                    vertical-align: middle;
                    color: #454d5a;
                    position: relative;">
            <div style="display: block;">
                <div style="position: relative;
                            width: inherit;
                            padding-left: 10px;
                            vertical-align: middle;
                            height: 61px;
                            display: inline-block;">
                </div>
                <div style="display: inline-block;
                            vertical-align: middle;" class="tooltip2">
                    <a style="color: #454d5a;">
                        <i class="fa fa-volume-off" aria-hidden="true"></i>
                        <a class="admin_tag" href="admin.html">系统通知</a>
                        <i class="find-light-icon" style="display: block"></i>
                    </a>
                    <div class="tooltiptext">
                        <li class="popup_user_toolbar__item" style="position: relative" v-for="n in notifies">
                            <p v-if="n.typeId==1" style="color: red;font-size: 10px">【陌生人】</p>
                            <p v-else style="color: red;font-size: 10px">【好友】</p>
                            <p v-text="n.friendName" style="color: green;font-size: 5px">killyou</p>
                            <p style="font-size: 5px">给你发来了一条消息</p>
                            <div style="margin-left: 5px" class="container" @click="show1==false?show1=true:show1=false">
                                <div class="dot"></div>
                            </div>
                            <div v-show="show1" style="width: 100%;height: 100px;overflow: hidden;position: absolute">
                                <p style="display: block">请求添加你为好友</p>
                                <button style="background-color: #1bb3e9;color: white" type="button" class="btn btn-default"
                                        @click="addFriends">接受</button>
                                <button style="background-color: #9c1d3d;color: white" type="button"
                                        class="btn btn-default">忽略</button>
                            </div>
                        </li>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<div style="box-sizing: border-box;
            padding-top: 30px;">
    <div id="wp-aside-nav__main">
        <div style="padding-top: 20px;
                    padding-bottom: 30px;
                    background-color: #fff;
                    position: relative;
                    z-index: 1;">
            <a class="router-link-exact-active" href="public_netdisk.html" target="index">
                <div class="wp-aside-nav__main-item-wrap" style="position: relative;">
                    <img :src="dropboximage1"
                         class="wp-aside-nav__main-item-img">
                    <p class="text-elli">公共网盘</p>
                </div>
            </a>
            <a class="router-link-exact-active" href="private_netdisk.html" target="index">
                <div class="wp-aside-nav__main-item-wrap" style="position: relative;">
                    <img :src="dropboximage2"
                         class="wp-aside-nav__main-item-img">
                    <p class="text-elli">私人网盘</p>
                </div>
            </a>
            <a class="router-link-exact-active" href="chat.html" target="index">
                <div class="wp-aside-nav__main-item-wrap" style="position: relative;">
                    <img :src="friendimage"
                         class="wp-aside-nav__main-item-img">
                    <p class="text-elli">好友列表</p>
                </div>
            </a>
            <a class="router-link-exact-active">
                <div class="wp-aside-nav__main-item-wrap" style="position: relative;">
                    <h1 class="text-elli">功<br>
                        <br>
                        能<br>
                        <br>
                        栏</h1>
                </div>
            </a>
        </div>
    </div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="js/utils.js"></script>
<script src="js/left.js"></script>
<script src="js/header.js"></script>
<script>

</script>
<iframe src="chat.html" style="position: fixed" name="index" height="100%" width="100%" scrolling="no" frameborder="0"/>
</div>
</body>
</html>